<script setup>
import { onMounted, ref } from 'vue'
import HeaderView from '../components/header/HeaderView.vue'
import SearchItem from '@/components/searchItem/SearchItem.vue'
import ArticleList from '@/components/articleList/articleList.vue'
import PaginateBar from '../components/paginateBar/PaginateBar.vue'
import FooterCopyright from '@/components/footer/FooterCopyright .vue'
import apiList from '@/api'

// get article List
const page = ref(1)
const pageNum = ref(20)
const keywords = ref('')
const totals = ref(0)
const articleList = ref([])

const getDataList = () => {
  const params = {
    page: page.value.toString(),
    pageNum: pageNum.value.toString(),
    keywords: keywords.value
  }
  apiList.apiList.getArticleList(params).then((res) => {
    totals.value = res.data.count
    articleList.value = res.data.list
  })
}

const getSearchVal = (val) => {
  keywords.value = val
  getDataList()
}

// paginate
const getCurrentPage = (currentPage) => {
  page.value = currentPage
  getDataList()
}
// mounted
onMounted(() => {
  getDataList()
})
</script>

<template>
  <HeaderView />
  <main>
    <SearchItem @getSearchVal="getSearchVal" />
  </main>
  <div class="posts-wrap">
    <ArticleList :list="articleList" />
    <PaginateBar v-if="totals > pageNum" :page="page" :pageNum="pageNum" :totals="totals" @get-current-page="getCurrentPage"/>
  </div>
  <FooterCopyright />
</template>

<style lang="less" scoped>
.posts-wrap {
  padding: 50px 0;
  max-width: 1440px;
  width: 95%;
  margin: 0 auto;
}
</style>
